import React, { useEffect } from 'react';
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';
import { LayoutDashboard, Settings, User, Hand, Calendar, Book, Moon, Gift } from 'lucide-react';
import logger from '../../utils/logger';

// 样式组件
const Container = styled.div`
  padding: 24px;
  background-color: #f5f5f5;
  min-height: 100vh;
`;

const ContentWrapper = styled.div`
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
`;

const PageHeader = styled.div`
  margin-bottom: 32px;
  text-align: center;
`;

const PageTitle = styled.h1`
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
`;

const PageDescription = styled.p`
  font-size: 16px;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
`;

const CardGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 32px;
`;

const ManagementCard = styled.div`
  background: linear-gradient(135deg, ${props => props.gradientStart} 0%, ${props => props.gradientEnd} 100%);
  border-radius: 12px;
  padding: 32px;
  color: white;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &:hover::before {
    opacity: 1;
  }
`;

const CardIcon = styled.div`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  margin-bottom: 20px;
  transition: all 0.3s ease;

  ${ManagementCard}:hover & {
    transform: scale(1.1);
  }

  svg {
    width: 40px;
    height: 40px;
  }
`;

const CardTitle = styled.h3`
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
`;

const CardDescription = styled.p`
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 20px;
  line-height: 1.5;
`;

const ActionButton = styled.button`
  background-color: rgba(255, 255, 255, 0.9);
  color: ${props => props.textColor || '#333'};
  border: none;
  border-radius: 24px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background-color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
`;

const ContentManagement = () => {
  const navigate = useNavigate();
  
  useEffect(() => {
    // 记录进入内容管理页面
    logger.info('进入内容管理页面');
  }, []);

  React.useEffect(() => {
    logger.info('进入内容管理系统主页');
  }, []);

  // 管理模块数据
  const managementModules = [
    {
      id: 'face-analysis',
      title: '面相分析配置',
      description: '管理面相分析的特征点识别和解读规则',
      icon: <User />,
      gradientStart: '#FF6B6B',
      gradientEnd: '#FF8E53',
      textColor: '#D84315',
      route: '/admin/content/face-analysis'
    },
    {
      id: 'palm-analysis',
      title: '手相分析配置',
      description: '管理手相分析的掌纹识别和解读规则',
      icon: <Hand />,
      gradientStart: '#4ECDC4',
      gradientEnd: '#44A08D',
      textColor: '#00695C',
      route: '/admin/content/palm-analysis'
    },
    {
      id: 'bazi-analysis',
      title: '八字分析配置',
      description: '管理八字分析的五行、生肖解读规则',
      icon: <Calendar />,
      gradientStart: '#45B7D1',
      gradientEnd: '#2196F3',
      textColor: '#0D47A1',
      route: '/admin/content/bazi-analysis'
    },
    {
      id: 'bazi-database',
      title: '八字数据库',
      description: '管理八字分析所需的基础数据和解读内容',
      icon: <Book />,
      gradientStart: '#9B59B6',
      gradientEnd: '#8E44AD',
      textColor: '#6D28D9',
      route: '/admin/content/bazi-database'
    },
    {
      id: 'dream-keyword',
      title: '梦境关键词管理',
      description: '管理梦境解析的关键词和解读规则',
      icon: <Moon />,
      gradientStart: '#34495E',
      gradientEnd: '#2C3E50',
      textColor: '#1E293B',
      route: '/admin/content/dream-keyword'
    },
    {
      id: 'tarot-management',
      title: '塔罗牌管理',
      description: '管理塔罗牌的牌面、含义和占卜规则',
      icon: <Gift />,
      gradientStart: '#E67E22',
      gradientEnd: '#D35400',
      textColor: '#9A3412',
      route: '/admin/content/tarot-management'
    }
  ];

  // 导航到对应管理页面
  const handleNavigate = (route, moduleId) => {
    logger.info(`进入内容管理模块: ${moduleId}`);
    navigate(route);
  };

  return (
    <Container>
      <ContentWrapper>
        <PageHeader>
          <PageTitle>内容管理系统</PageTitle>
          <PageDescription>
            通过以下模块，您可以配置和管理系统中的各类分析规则和内容。每个模块提供直观的界面，让您轻松调整分析算法的参数和解读内容。
          </PageDescription>
        </PageHeader>

        <CardGrid>
          {managementModules.map(module => (
            <ManagementCard
              key={module.id}
              gradientStart={module.gradientStart}
              gradientEnd={module.gradientEnd}
              onClick={() => handleNavigate(module.route, module.id)}
            >
              <CardIcon>
                {module.icon}
              </CardIcon>
              <CardTitle>{module.title}</CardTitle>
              <CardDescription>{module.description}</CardDescription>
              <ActionButton textColor={module.textColor}>
                管理配置
              </ActionButton>
            </ManagementCard>
          ))}
        </CardGrid>

        <div style={{ marginTop: 48, textAlign: 'center' }}>
          <button 
            onClick={() => navigate('/admin/dashboard')}
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 8,
              margin: '0 auto',
              padding: '10px 20px',
              backgroundColor: '#f0f0f0',
              border: 'none',
              borderRadius: '6px',
              fontSize: '14px',
              cursor: 'pointer'
            }}
          >
            <LayoutDashboard size={16} />
            返回仪表盘
          </button>
        </div>
      </ContentWrapper>
    </Container>
  );
};

export default ContentManagement;